<template>
    <li class="cover-wrapper" :class="$route.path == '/discover/playlist' ? '' : 'discover-style'">
        <div class="cover-1">
            <img :src="imgUrl">
            <i class="icn-crown"></i>
            <a :title="desc" :href="coverRoute"  class="mask"></a>
            <div class="bottom">
                <a class="icon-play" title="播放" href="javascript:;"></a>
                <span class="icon-headset"></span>
                <span class="rs">{{ count }}</span>
            </div>
        </div>
        <p class="desc">
           
            <a :data-res-cover-id="coverId" :title="desc" :to="coverRoute" class="tit " :class="$route.path == '/discover/playlist' ? 'f-thide' : ''">
                <i v-if="isRadio" class="icon-radio"></i>
                {{ desc }}
            </a>
        </p>
        <p class="author" v-if="$route.path == '/discover/playlist'">
            <span class="by">by</span>
            <a :data-res-user-id="userId" :href="userRoute" class="name f-thide s-fc3">{{username}}</a>
            <img :src="coverIconImgUrl">
        </p>
    </li>
</template>
<script setup>
import { useRoute } from 'vue-router';
const $route = useRoute();
defineProps({
    desc: String,
    imgUrl: String,
    isRadio: Boolean,
    count: Number,
    coverRoute: String,
    coverId: String,
    username: String,
    userId: String,
    userRoute:String,
    coverIconImgUrl: String
})


</script>

<style lang="scss" scoped>
.cover-wrapper {
    float: left;
    display: inline-block;
    width: 140px;
    height: 188px;
    overflow: hidden;
    padding: 0 0 30px 50px;
    line-height: 1.4;

    &.discover-style{
        height: 204px;
        padding-left: 42px;
    }

    .cover-1 {
        width: 140px;
        height: 140px;
        position: relative;

        .icn-crown{
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            background-position: -135px -220px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
        }

        .mask {
            background-position: 0 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;

        }

        .bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 27px;
            background-position: 0 -537px;
            color: #ccc;

            .icon-play {
                position: absolute;
                right: 10px;
                bottom: 5px;
                width: 16px;
                height: 17px;
                background-position: 0 0;
                float: right;
            }

            .icon-headset {
                float: left;
                width: 14px;
                height: 11px;
                background-position: 0 -24px;
                margin: 9px 5px 9px 10px;
            }

            .rs {
                float: left;
                margin: 7px 0 0 0;
            }

        }
    }



    .desc {
        margin: 8px 0 3px;
        font-size: 14px;

        p {
            width: 100%;

        }

        .tit{
            display: inline-block;
            max-width: 100%;
            vertical-align: middle;
        }

        .icon-radio {
            position: relative;
            top: -1px;
            margin-right: 3px;
            vertical-align: middle;
            display: inline-block;
            width: 35px;
            height: 15px;
            background-position: -31px -658px;


        }

        a {
            // display: inline-block;
            vertical-align: middle;

            &:hover {
                color: #000;
                text-decoration: underline;
            }
        }
    }

    .author{
        .by{
            color: #999;
         
        }
        .name{
            max-width: 76%;
            display: inline-block;
            vertical-align: middle;
            margin: 0 3px;
        }
        img{
            height: 13px;
            width: 13px;
            display: inline-block;
            vertical-align: middle;
        }
    }

}
</style>
